<template>
  <div class="app-container">
    <div class="mt20">
      <el-button type="primary" @click="handleDialog()">添加角色</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="ID" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="编码" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="功能描述" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleDialog(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="authDialog(scope.row)">权限</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination-container">
      <el-pagination :current-page="currentPage" :total="listCount" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>
    </el-row>

    <el-dialog :title="dialogTitle" width="450px" :visible.sync="showDialog" :close-on-click-modal="false"
               @close="reset">
      <el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px" status-icon>
        <el-form-item label="编码" prop="code">
          <el-input v-model="ruleForm.code" placeholder="请输入编码"/>
        </el-form-item>
        <el-form-item label="角色名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入角色名"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status" size="medium">
            <el-radio border :label="1" >正常</el-radio>
            <el-radio border :label="9" >禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="功能描述" prop="description">
          <el-input type="textarea" v-model="ruleForm.description" placeholder="功能描述"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doSave()">确 定</el-button>
      </div>
    </el-dialog>
    <dialog-box ref="dialog"/>
    <userList ref="userList"/>
  </div>
</template>
<script>
  import { pagination } from '@/mixins/index'
  import dialogBox from './components/choiceAuthDialog.vue'
  import userList from './components/userList.vue'

  export default {
    components: {
      dialogBox,
      userList
    },
    mixins: [pagination],
    data() {
      return {
        list: null,
        listCount: 1,
        listLoading: true,
        ruleForm: {
          id: '',
          code: '',
          name: '',
          status: '',
          description: ''
        },
        rules: {
          id: [{ required: true, message: '必填项', trigger: 'blur' }],
          code: [{ required: true, message: '必填项', trigger: 'blur' }],
          name: [{ required: true, message: '必填项', trigger: 'blur' }],
          status: [{ required: true, message: '必填项', trigger: 'blur' }]
        },
        showDialog: false,
        dialogTitle: ''
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.listLoading = true
        this.$http.request({
          url: `/role/${this.page}/${this.limit}`,

          data: {},
          tokenRefresh: () => this.getData()
        }).then(res => {
          const { list, total } = res.data
          this.list = list
          this.listCount = total
          this.listLoading = false
        })
      },
      handleDialog(row) {
        if (row) {
          this.dialogTitle = '编辑'
          this.ruleForm = Object.assign({}, row)
        } else {
          this.dialogTitle = '新增'
          this.ruleForm = {}
        }
        this.showDialog = true
      },
      doSave() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return
          }
          const data = Object.assign({}, this.ruleForm)
          this.$http.request({
            method: this.dialogTitle === '新增' ? 'post' : 'put',
            url: this.dialogTitle === '新增' ? `/role` : `/role/${data.id}`,
            data: JSON.stringify(data)
          }).then(() => {
            this.$message.success('保存成功')
            this.showDialog = false
            this.getData()
          })
        })
      },
      del(row) {
        this.$confirm('是否删除该数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.request({
            method: 'delete',
            url: `/role/${row.id}`

          }).then(res => {
            this.$message.success('删除成功')
            this.getData()
          })
        }).catch(() => {
        })
      },
      authDialog(row) {
        const dialog = this.$refs.dialog
        dialog.dialogFormVisible = true
        dialog.roleId = row.id
        this.$nextTick(() => {
          // dialog.getMenuData()
          // dialog.getApiData()
          dialog.getData()
        })
      },
      userList(row) {
        const dialog = this.$refs.userList
        dialog.dialogFormVisible = true
        dialog.roleId = row.id
        this.$nextTick(() => {
          dialog.getData()
        })
      },
      reset() {
        this.$refs.form.resetFields()
      }
    }
  }
</script>
